<template>
	<view class="register-page">
		<view class="register-box">
			<view class="logo">
				<!-- 页面标题 -->
				<view class="title">用户注册</view>

				<!-- 表单区域 -->
				<form @submit="onSubmit">
					<!-- 头像 -->
					<view class="form-item">
						<label>头像:</label>
						<view class="avatar-container">
							<image :src="avatar ? avatar : '/static/image/default-avatar.jpg'" mode="aspectFill"
								@click="chooseAvatar"></image>
						</view>
					</view>

					<!-- 用户名 -->
					<view class="form-item">
						<label>用户名:</label>
						<input v-model="username" placeholder="请输入用户名" />
					</view>

					<!-- 密码 -->
					<view class="form-item">
						<label>密码:</label>
						<input v-model="password" type="password" placeholder="请输入密码" />
					</view>

					<!-- 电话号码 -->
					<view class="form-item">
						<label>电话号码:</label>
						<input v-model="phoneNumber" placeholder="请输入电话号码" />
					</view>

					<!-- 验证码 -->
					<view class="form-item">
						<label>验证码:</label>
						<input v-model="verificationCode" placeholder="请输入验证码" />
						<button @click="sendVerificationCode" class="code-box">获取验证码</button>
					</view>

					<!-- 出生日期 -->
					<view class="form-item">
						<label>出生日期:</label>
						<picker mode="date" :value="birthday" :start="startDate" :end="endDate"
							@change="onBirthdayChange">
							<view class="select-box">{{ birthday }}</view>
						</picker>
					</view>

					<!-- 性别 -->
					<view class="form-item">
						<label>性别:</label>
						<picker mode="selector" :range="genderOptions" :value="genderIndex" @change="onGenderChange">
							<view class ="select-box">{{ genderOptions[genderIndex] }}</view>
						</picker>
					</view>


					<!-- 提交按钮 -->
					<button form-type="submit" class="login-button">注册</button>
				</form>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			const today = new Date();
			const eighteenYearsAgo = new Date(today.getFullYear() - 18, today.getMonth(), today.getDate());
			const startDate =
				`${eighteenYearsAgo.getFullYear()}-${(eighteenYearsAgo.getMonth() + 1).toString().padStart(2, '0')}-${eighteenYearsAgo.getDate().toString().padStart(2, '0')}`;
			const endDate =
				`${today.getFullYear()}-${(today.getMonth() + 1).toString().padStart(2, '0')}-${today.getDate().toString().padStart(2, '0')}`;

			return {
				username: '',
				password: '',
				phoneNumber: '',
				verificationCode: '',
				birthday: startDate,
				genderOptions: ['男', '女'],
				genderIndex: 0,
				avatar: '',
				startDate,
				endDate,
				uploading: false,
				uploadError: false,
				message: '',
				success: ''
			};
		},
		methods: {
			// 选择出生日期
			onBirthdayChange(e) {
				this.birthday = e.detail.value;
			},
			// 选择性别
			onGenderChange(e) {
				this.genderIndex = e.detail.value;
			},
			// 选择头像
			chooseAvatar() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.uploading = true;
						this.uploadError = false;
						uni.uploadFile({
							url: 'your_upload_api_url', // 替换为实际的上传接口地址
							filePath: res.tempFilePaths[0],
							name: 'avatar',
							success: (uploadRes) => {
								if (uploadRes.statusCode === 200) {
									const data = JSON.parse(uploadRes.data);
									this.avatar = data.url; // 假设返回的结果中有头像的 url
								} else {
									this.uploadError = true;
								}
							},
							fail: () => {
								this.uploadError = true;
							},
							complete: () => {
								this.uploading = false;
							},
						});
					},
				});
			},
			// 发送验证码
			sendVerificationCode() {
				// 这里可以添加发送验证码的逻辑，例如调用后端接口
				if (!this.phoneNumber) {
					uni.showToast({
						title: '请输入电话号码',
						icon: 'none',
						duration: 3000
					});
					return;
				}
				else {
					uni.showToast({
						title:'获取验证码成功',
						icon:'success'
					});
					uni.request({
						url: 'http://localhost:3000/api/sendVerificationCode',
						method: 'POST',
						header: {
							'Content-Type': 'application/json'
						},
						data: {
							phoneNumber: this.phoneNumber
						},
						success: (res) => {
							console.log(res, 'res')
							if (res.data.success) {
								console.log('接口调用成功')
								// 成功获取验证码，弹窗提示验证码
								setTimeout(function(){uni.showToast({
									title: `验证码：${res.data.code}`,
									duration: 3000
								})},3000);
								
							} else {
								// 获取验证码失败，弹窗提示获取失败
								uni.showToast({
									title: res.data.message,
									duration: 3000
								});
							}
						},
						fail: () => {
							// 请求失败，弹窗提示网络错误
							uni.showToast({
								title: '网络错误，请稍后重试',
								duration: 3000
							});
						}
					})
				}
				
			},
			// 提交表单
			onSubmit() {
				// 日期格式验证
				const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
				if (!dateRegex.test(this.birthday)) {
					uni.showToast({
						title: '出生日期格式不正确',
						icon: 'none',
					});
					return;
				}
				const formData = {
					username: this.username,
					password: this.password,
					phoneNumber: this.phoneNumber,
					verificationCode: this.verificationCode,
					birthday: this.birthday,
					gender: this.genderOptions[this.genderIndex],
					avatar: this.avatar,
				};
				uni.request({
					url: 'http://localhost:3000/api/register',
					method: 'POST',
					data: formData,
					success: (res) => {
						if (res.data.success) {
							uni.showToast({
								title: `${res.data.message}`,
								duration: 3000
							});
							setTimeout(function() {
								uni.navigateto({
									url:'/pages/userInfo/userInfo'
								})
								
							}, 1000)
						}
					},
				})
				// 这里可以添加提交表单数据到后端的逻辑
				console.log('注册表单数据:', formData);
			},
		},
	};
</script>

<style scoped>
	.register-page {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		background: #F0F3E4;
	}

	.register-box {
		width: 70%;
		max-width: 350px;
		height: 70%;
		background: linear-gradient(45deg, #ffffff 0%, #68cc6b 99%, #f4f663 100%);
		border-radius: 10px;
		padding: 20px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
		animation: fadeIn 0.5s ease;
	}

	.logo {
		text-align: center;
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 20px;
	}

	.title {
		color: rgb(126, 131, 125);
		margin-bottom: 20px;
	}

	.form-item {
		display: flex;
		align-items: center;
		margin-bottom: 40rpx;
		color: rgb(126, 131, 125);

	}

	.form-item label {
		width: 150rpx;
		font-size: 28rpx;
		font-weight: bold;
	}

	.form-item input {
		flex: 1;
		height: 60rpx;
		border: 1px solid #f6f69e;
		border-radius: 8rpx;
		padding: 0 10rpx;
		font-size: 28rpx;
	}

	.form-item button {
		margin-left: 20rpx;
		padding: 10rpx 20rpx;
		background-color: #ffffff;
		color: blue;
		border: none;
		border-radius: 8rpx;
		font-size: 24rpx;
	}

	.avatar-container {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 20rpx;
		background-color: white;
	}

	.avatar-container image {
		width: 100%;
		height: 100%;
	}

	.date-tip {
		margin-left: 20rpx;
		font-size: 24rpx;
		color: #999;
	}

	.upload-button {
		margin-left: 20rpx;
		padding: 10rpx 20rpx;
		background-color: #84eb81;
		color: white;
		border: none;
		border-radius: 8rpx;
		font-size: 28rpx;
	}

	.upload-tip {
		margin-left: 20rpx;
		font-size: 24rpx;
	}

	.upload-tip.error {
		color: red;
	}

	.login-button {
		background: linear-gradient(45deg, #dcff9a 0%, #84eb81 99%, #c3d618 100%);
		color: rgb(126, 131, 125);
		border-radius: 10px;
		border: none;
		margin-top: 25px;
		padding: 10px;
		font-size: 15px;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}
	.code-box
	{
		background: linear-gradient(45deg, #dcff9a 0%, #84eb81 99%, #c3d618 100%);
		color: rgb(126, 131, 125);
		border-radius: 10px;
		border: none;
		font-size: 15px;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}
	.select-box
	{
		width: 150px;
		flex: 1;
		height: 60rpx;
		border: 1px solid #f6f69e;
		border-radius: 8rpx;
		padding: 0 10rpx;
		font-size: 28rpx;
	}
</style>